﻿@{
    View.Title = "EarthQuakes";
    Layout = "~/Views/Shared/_Layout.cshtml";
    Random r = new Random();
}

@* Google Maps API and custom code *@
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script src="@Url.Content("~/Content/quakes_google_maps_code.js")?x=@r.Next()" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $("#filterForm").dialog({
            autoOpen: false,
            height: 300,
            width: 350,
            modal: false,
            buttons: {
                "Sýna á korti": function () {
                    clearOverlays();

                    var fromYear = $("#year_slider").slider("values", 0);
                    var toYear = $("#year_slider").slider("values", 1);

                    var fromDepth = $("#depth_slider").slider("values", 0);
                    var toDepth = $("#depth_slider").slider("values", 1);

                    var fromMagni = $("#magnitude_slider").slider("values", 0);
                    var toMagni = $("#magnitude_slider").slider("values", 1);

                    FilterMap(fromYear, toYear, fromDepth, toDepth, fromMagni, toMagni);

                    $(this).dialog("close");
                },
                "Loka": function () {
                    $(this).dialog("close");
                }
            }
        });

        $("#filterButton")
			.button()
			.click(function () {
			    $("#filterForm").dialog("open");
			});

        $("#year_slider").slider({
            range: true,
            min: 1973,
            max: 2010,
            values: [1990, 2000],
            slide: function (event, ui) {
                $("#year_range_selected").html(ui.values[0] + " - " + ui.values[1]);
            }
        });
        $("#year_range_selected").html($("#year_slider").slider("values", 0) + " - " + $("#year_slider").slider("values", 1));

        $("#magnitude_slider").slider({
            range: true,
            min: 3,
            max: 10,
            values: [7, 10],
            slide: function (event, ui) {
                $("#magnitude_range_selected").html(ui.values[0] + " - " + ui.values[1]);
            }
        });
        $("#magnitude_range_selected").html($("#magnitude_slider").slider("values", 0) + " - " + $("#magnitude_slider").slider("values", 1));

        $("#depth_slider").slider({
            range: true,
            min: 0,
            max: 750,
            values: [200, 550],
            slide: function (event, ui) {
                $("#depth_range_selected").html(ui.values[0] + " - " + ui.values[1]);
            }
        });
        $("#depth_range_selected").html($("#depth_slider").slider("values", 0) + " - " + $("#depth_slider").slider("values", 1));
    });
</script>

<div id="map_canvas" style="width:100%; height:80%"></div>
<input type="button" id="filterButton" value="Stillingar">
<div id="filterForm" title="Stillingar">
    <label for="year">Year: <span id="year_range_selected"></span></label><br />
    <div id="year_slider" style="margin:5px;"></div>

    <label for="magnitude">Magnitude: <span id="magnitude_range_selected"></span></label><br />
    <div id="magnitude_slider" style="margin:5px;"></div>

    <label for="depth">Depth: <span id="depth_range_selected"></span></label><br />
    <div id="depth_slider" style="margin:5px;"></div>
</div>
<script type="text/javascript">
    initialize();
</script>


